{include file="public/layout" /}
<body>
  <style>
      .span_1 {
          float: left;
          margin-left: 0px;
          height: 130px;
          line-height: 130px;
      }

      .span_1 ul {
          list-style: none;
          padding: 0px;
      }

      .span_1 ul li {
          border: 1px solid #CCC;
          height: 40px;
          padding: 0px 10px;
          margin-left: -1px;
          margin-top: -1px;
          line-height: 40px;
      }
      #mark_txt_color {
          /*margin:0;*/
          /*padding:0;*/
          border:solid 1px #ccc;
          width:70px;
          border-right:40px solid green;
          /*line-height:20px;*/
          display: block;
          padding-left: 10px;
          height: 38px;
          line-height: 1.3;
          border-style: solid;
          background-color: #fff;
          border-radius: 2px;
      }
  </style>
  <script type="text/javascript" src="__PUBLIC__/plugins/colpick/js/colpick.js"></script>
  <link href="__PUBLIC__/plugins/colpick/css/colpick.css" rel="stylesheet" type="text/css"/>
  <div class="layui-fluid" id="LAY-component-layer-list">
    <div class="layui-row">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="web-system">
            <div class="layui-tab layui-tab-card">
              <ul class="layui-tab-title">
                  {eq name="'System@water'|is_check_access" value="1"}
                  <li class="layui-this"><a href="{:url('System/water')}">水印配置</a></li>
                  {/eq}

                  {eq name="'System@thumb'|is_check_access" value="1"}
                  <li><a href="{:url('System/thumb')}">缩略图配置</a></li>
                  {/eq}
              </ul>
              <div class="layui-tab-content" style="padding:10px 0">
                <div class="layui-tab-item layui-show">
                  <div class="layui-row layui-col-space15">
                    <div class="layui-col-md12">
                      <div class="layui-card">
                        <div class="layui-card-body" pad15>
                          <div class="layui-form" wid100 lay-filter="">
                            <div class="layui-form-item">
                              <label class="layui-form-label">水印功能</label>
                              <div class="layui-input-inline w70">
                                  <input type="checkbox" lay-filter="is_mark" lay-skin="switch" lay-text="开启|关闭" {if condition="isset($config.is_mark) && $config.is_mark eq 1"}checked{/if}>
                                  <input type="hidden" name="is_mark" value="{$config.is_mark|default='0'}" />
                              </div>
                              <div class="layui-input-inline layui-btn-container" style="width: auto;">
                                  <div class="layui-form-mid layui-word-aux ey_helptips"></div>
                                  <div class="layui-form-inline2 ey_helptips_txt">全站图片添加水印</div>
                              </div>
                            </div>
                            <div class="layui-form-item">
                              <label class="layui-form-label">缩略图水印</label>
                              <div class="layui-input-inline w70">
                                <input type="checkbox" lay-filter="is_thumb_mark" lay-skin="switch" lay-text="开启|关闭" {if condition="isset($config.is_thumb_mark) && $config.is_thumb_mark eq 1"}checked{/if}>
                                <input type="hidden" name="is_thumb_mark" value="{$config.is_thumb_mark|default='0'}" />
                              </div>
                              <div class="layui-input-inline layui-btn-container" style="width: auto;">
                                  <div class="layui-form-mid layui-word-aux ey_helptips"></div>
                                  <div class="layui-form-inline2 ey_helptips_txt">开启之后，满足水印条件的缩略图会自动打上水印</div>
                              </div>
                            </div>
                            <div class="layui-form-item">
                              <label class="layui-form-label">水印类型</label>
                              <div class="layui-input-inline">
                                 <input type="radio" name="mark_type" lay-filter="mark_type" value="text" title="文字" {if condition="isset($config.mark_type) && $config.mark_type eq 'text'"}checked{/if}>
                                 <input type="radio" name="mark_type" lay-filter="mark_type" value="img" title="图片" {if condition="isset($config.mark_type) && $config.mark_type eq 'img'"}checked{/if}>
                              </div>
                            </div>
                            <div class="layui-form-item">
                              <label class="layui-form-label">水印条件</label>
                              <div class="layui-input-inline w240">
                                  <input onKeyUp="this.value=this.value.replace(/[^\d]/g,'')" onpaste="this.value=this.value.replace(/[^\d]/g,'')" pattern="^\d{1,}$" style="width: 100px;float: left" type="text" name="mark_width" lay-verify="number" value="{$config.mark_width|default=''}" class="layui-input"> <span style="float: left;line-height: 38px;margin-left: 4px;">宽度 单位像素(px)</span>
                              </div>
                              <div class="layui-input-inline w240">
                                  <input onKeyUp="this.value=this.value.replace(/[^\d]/g,'')" onpaste="this.value=this.value.replace(/[^\d]/g,'')" pattern="^\d{1,}$" style="width: 100px;float: left" type="text" name="mark_height" lay-verify="number" value="{$config.mark_height|default=''}" class="layui-input"> <span style="float: left;line-height: 38px;margin-left: 4px;">高度 单位像素(px)</span>
                              </div>
                              <div class="layui-form-mid layui-word-aux ey_helptips"></div>
                              <div class="layui-form-inline2 ey_helptips_txt">提示：图片宽度和高度至少要达到以上像素才能添加水印</div>
                            </div>
                            <div class="layui-form-item texttr none">
                              <label class="layui-form-label">水印文字</label>
                              <div class="layui-input-inline">
                                <input type="text" name="mark_txt" value="{$config.mark_txt|default=''}" class="layui-input">
                              </div>
                            </div>
                            <div class="layui-form-item imgtr">
                              <label class="layui-form-label">水印图片</label>
                              <div class="layui-input-inline">
                                  <div class="upload-box">
                                    <div class="upload-img fl">
                                      <div class="icaction none">
                                        <span class="load_images">
                                           <a href="javascript:void(0);" onclick="BigImages($('#img_mark_img').attr('src'));">
                                           <i class="layui-icon layui-icon-search mr5"></i>查看
                                           </a>
                                        </span>
                                        <span class="load_images">
                                          <a href="javascript:void(0);" data-inputid="mark_img" onclick="DelImages(this);">
                                          <i class="layui-icon layui-icon-delete mr5"></i>删除
                                          </a>
                                        </span>
                                      </div>
                                      <div class="cover-bg none"></div>
                                      <img id="img_mark_img" src="{$config.mark_img|get_default_pic=###}">
                                    </div>
                                    <div class="upload-right fl">
                                      <button class="layui-btn test-upload-demoMore layui-btn-primary layui-btn-sm fl mb10 mr5" lay-data="{number:1,ey_inputId:'mark_img',ey_savepath:'allimg'}"><i class="layui-icon">&#xe67c;</i>上传图片</button>
                                      <button class="layui-btn layui-btn-sm layui-btn-primary layui-btn-sm fl mb10" onClick="GetPictureFolder(1,'mark_img');"><i class="layui-icon">&#xe64a;</i>图库</button>
                                      <input name="mark_img" id="mark_img" placeholder="图片地址" value="{$config.mark_img|default=''}" class="layui-input">
                                    </div>
                                  </div>
                              </div>
                              <div class="layui-input-inline layui-btn-container" style="width: auto;">
                                <div class="layui-form-mid layui-word-aux ey_helptips"></div>
                                <div class="ey_helptips_txt">最佳显示尺寸为240*60像素</div>
                              </div>
                            </div>
                            <div class="layui-form-item texttr none">
                              <label class="layui-form-label">字体大小</label>
                              <div class="layui-input-inline">
                                <input type="text" name="mark_txt_size" value="{$config.mark_txt_size|default=30}" class="layui-input">
                              </div>
                            </div>
                            <div class="layui-form-item texttr none">
                              <label class="layui-form-label">文字颜色</label>
                              <div class="layui-input-inline">
                                <input type="text" name="mark_txt_color" value="{$config.mark_txt_color|default='#000000'}" id="mark_txt_color" style="border-color: {$config.mark_txt_color|default='#000000'};">
                              </div>
                            </div>
                            <div class="layui-form-item">
                              <label class="layui-form-label">水印透明度</label>
                              <div class="layui-input-inline">
                                <div id="mark_degree2" class="test-slider-demo" style="padding-top: 18px;"></div>
                                <input type="hidden" name="mark_degree" value="{$config.mark_degree|default='0'}" class="input-txt">
                              </div>
                              <div class="layui-input-inline layui-btn-container " style="width: auto;">
                                <div class="layui-form-mid layui-word-aux ey_helptips"></div>
                                <div class="layui-form-inline2 ey_helptips_txt">0代表完全透明，100代表不透明</div>
                              </div>
                            </div>
                            <div class="layui-form-item imgtr">
                              <label class="layui-form-label">JPEG 水印质量</label>
                              <div class="layui-input-inline">
                                <div id="mark_quality2" class="test-slider-demo" style="padding-top: 18px;"></div>
                                <input type="hidden" name="mark_quality" value="{$config.mark_quality|default='0'}" class="input-txt">
                              </div>
                              <div class="layui-input-inline layui-btn-container " style="width: auto;">
                                <div class="layui-form-mid layui-word-aux ey_helptips"></div>
                                <div class="layui-form-inline2 ey_helptips_txt">水印质量请设置为0-100之间的数字，决定 jpg 格式图片的质量</div>
                              </div>
                            </div>
                            <div class="layui-form-item">
                              <label class="layui-form-label">水印位置</label>
                              <div class="layui-input-inline">
                                <input type="radio" name="mark_sel" value="1" title="顶部居左" {if condition="isset($config.mark_sel) && $config.mark_sel eq '1'"}checked{/if}>
                                <input type="radio" name="mark_sel" value="2" title="顶部居中" {if condition="isset($config.mark_sel) && $config.mark_sel eq '2'"}checked{/if}>
                                <input type="radio" name="mark_sel" value="3" title="顶部居右" {if condition="isset($config.mark_sel) && $config.mark_sel eq '3'"}checked{/if}>
                                <input type="radio" name="mark_sel" value="4" title="中部居左" {if condition="isset($config.mark_sel) && $config.mark_sel eq '4'"}checked{/if}>
                                <input type="radio" name="mark_sel" value="5" title="中部居中" {if condition="isset($config.mark_sel) && $config.mark_sel eq '5'"}checked{/if}>
                                <input type="radio" name="mark_sel" value="6" title="中部居右" {if condition="isset($config.mark_sel) && $config.mark_sel eq '6'"}checked{/if}>
                                <input type="radio" name="mark_sel" value="7" title="底部居左" {if condition="isset($config.mark_sel) && $config.mark_sel eq '7'"}checked{/if}>
                                <input type="radio" name="mark_sel" value="8" title="底部居中" {if condition="isset($config.mark_sel) && $config.mark_sel eq '8'"}checked{/if}>
                                <input type="radio" name="mark_sel" value="9" title="底部居右" {if condition="isset($config.mark_sel) && $config.mark_sel eq '9'"}checked{/if}>
                              </div>
                            </div>
                            <div class="layui-form-item">
                              <div class="layui-input-block">
                                <input type="hidden" name="tabase" value="{$Request.param.tabase}">
                                <button class="layui-btn" lay-submit lay-filter="formSubmit">确认提交</button>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
     </div>
  </div>

  <script>

  $(document).ready(function(){
      // 鼠标事件，加载查看大图和删除图片
      $(".upload-img").live('mouseover', function(){
          $(this).find('div.icaction').show();
          $(this).find('div.cover-bg').show();
      }).live('mouseout', function(){
          $(this).find('div.icaction').hide();
          $(this).find('div.cover-bg').hide();
      });
  });

  layui.config({
    base: '__SKIN__/' //静态资源所在路径
    ,version: '{$version}'
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'set', 'slider'], function(){
    var $ = layui.$
    // ,admin = layui.admin
    ,element = layui.element
    ,layer = layui.layer
    ,form = layui.form
    ,slider = layui.slider;
      
    element.render();

    var marktype = $('input[name=mark_type]:checked').val();
    setwarter(marktype);
    function setwarter(marktype){
        if(marktype == 'text'){
            $('.texttr').show();
            $('.imgtr').hide();
        }else{
            $('.texttr').hide();
            $('.imgtr').show();
        }
    }

    // 监听开关
    form.on('switch', function(data){
      var elemId = data.elem.attributes['lay-filter']['nodeValue'];
      if (data.elem.checked) {
        this.value = 1;
      } else {
        this.value = 0;
      }
      $("input[name='"+elemId+"']").val(this.value);
    });

    // 监听单选项
    form.on('radio(mark_type)', function(data){
      setwarter(data.value);
    });

    // 颜色选择
    $('#mark_txt_color').colpick({
        flat:false,
        layout:'rgbhex',
        submit:0,
        colorScheme:'light',
        color:$('#mark_txt_color').val(),
        onChange:function(hsb,hex,rgb,el,bySetColor) {
            $(el).css('border-color','#'+hex);
            // Fill the text box just if the color was set using the picker, and not the colpickSetColor function.
            if(!bySetColor) $(el).val('#'+hex);
        }
    }).keyup(function(){
        $(this).colpickSetColor('#'+this.value);
    });

    // 水印透明度
    slider.render({
        elem: '#mark_degree2'
        ,value: $('input[name=mark_degree]').val()
        ,theme: '#5FB878' //主题色
        ,change: function(value){
          $('input[name=mark_degree]').val(value)
        }
    });
    // JPEG 水印质量
    slider.render({
        elem: '#mark_quality2'
        ,value: $('input[name=mark_quality]').val()
        ,theme: '#5FB878' //主题色
        ,change: function(value){
          $('input[name=mark_quality]').val(value)
        }
    });

    //监听提交
    form.on('submit(formSubmit)', function(data){
        var load = layer_loading();
        data.field._ajax = 1;
        $.ajax({
            type : 'post',
            url : "{:url('System/water')}",
            data : data.field,
            dataType : 'json',
            success : function(res){
                layer.close(load); //关闭loading
                if(res.code == 1){
                    layer.msg(res.msg, {icon: 1, time: 1000}, function(){
                        window.location.reload();
                    });
                }else{
                    showErrorMsg(res.msg);
                }
            },
            error: function(e){
                layer.close(load); //关闭loading
                showErrorAlert();
            }
        });
        return false;
    });

  });

  </script>
{include file="public/footer" /}